<template>
  <div class="head bg-[#F5F5F5] w-[100vw] text-center py-2 text-3! font-bold z-[1000000]! ">
    <v-row no-gutters class="px-5 sm:px-0! max-w-[700px] mx-auto! md:text-[15px]!">
      <v-col cols="12" sm="6" class="flex items-center!  justify-center! sm:justify-start!  font-bold pr-2">
        UP TO <span class="text-red ml-1"> 30% OFF </span> . LIMITED TIME ONLY
      </v-col>
      <v-col cols="12" sm="6">
        <div class="flex items-center!  justify-center! sm:justify-end! font-bold md:text-[15px]!">
          <div class="h-full mr-2 flex justify-center items-center! text-[14px]!">
            <img src="/transport.png" alt="" srcset="" class="w-5! h-3! mr-2 sm:w-7! sm:h-4!" />
            Free Design Quote and Shipping
          </div>
        </div>
      </v-col>
    </v-row>
  </div>
</template>

<script setup>
const { data } = await useFetch('/api/test')
</script>


<style scoped lang="scss">
.head {
  padding-top: 16px;
  padding-bottom: 16px;
}

// 媒体查询pc短
@media (min-width: 768px) {
  .head {
    padding-top: 0px !important;
    padding-bottom: 0px !important;
  }
}
</style>